import React, { useRef, memo } from 'react';
import { Row, Col, Form, Input, Button, MessagePlugin, DateRangePicker } from 'tdesign-react';
import { FormInstanceFunctions, SubmitContext } from 'tdesign-react/es/form/type';
import { useAppDispatch, useAppSelector } from '../../../../modules/store';
import { downloadEmployee, IEmployeeQuery } from '../../../../api/employee';
import { getList, selectListSelect } from '../../../../modules/list/select';
import { Simulate } from 'react-dom/test-utils';
import compositionStart = Simulate.compositionStart;

const { FormItem } = Form;

export type FormValueType = {
  name?: string;
  status?: string;
  number?: string;
  time?: string;
  type?: string;
};

export type SearchFormProps = {
  onCancel: () => void;
  onSubmit: (values: FormValueType) => Promise<void>;
};

const SearchForm: React.FC<SearchFormProps> = (props) => {
  const formRef = useRef<FormInstanceFunctions>();
  const dispatch = useAppDispatch();
  const pageState = useAppSelector(selectListSelect);
  const onSubmit = (e: SubmitContext) => {
    if (e.validateResult === true) {
      MessagePlugin.success('查询成功');
    }

    const queryValue = formRef?.current?.getFieldsValue?.(true) as any;
    const birthday = queryValue.birthday as Date[];
    delete queryValue.birthday;
    const employeeQuery: IEmployeeQuery = { ...queryValue, size: pageState.size, current: pageState.current };

    if (birthday.length !== 0) {
      // eslint-disable-next-line prefer-destructuring
      employeeQuery.startBirthday = birthday[0];
      // eslint-disable-next-line prefer-destructuring
      employeeQuery.endBirthday = birthday[1];
    }
    console.log(employeeQuery);
    dispatch(getList(employeeQuery));
  };

  const onReset = () => {
    props.onCancel();
    MessagePlugin.success('重置成功');
  };

  const download = async () => {
    await downloadEmployee();
  };

  return (
    <div className='list-common-table-query'>
      <Form ref={formRef} onSubmit={onSubmit} onReset={onReset} labelWidth={80} colon>
        <Row>
          <Col flex='1'>
            <Row gutter={[16, 16]}>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='员工工号' name='id'>
                  <Input placeholder='请输入员工工号' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='员工姓名' name='name'>
                  <Input placeholder='请输入员工姓名' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='员工职位' name='work'>
                  <Input placeholder='请输入员工职位' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='员工电话' name='phone'>
                  <Input placeholder='请输入员工电话' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='员工住址' name='address'>
                  <Input placeholder='请输入员工住址' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='员工生日' name='birthday'>
                  <DateRangePicker allowInput clearable />
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col flex='160px'>
            <Button theme='primary' type='submit' style={{ margin: '0px 20px' }}>
              查询
            </Button>
            <Button type='reset' variant='base' theme='default'>
              重置
            </Button>
            <Button onClick={download} theme='primary' style={{ margin: '15px 20px' }}>
              导出
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default memo(SearchForm);
